<script setup lang="ts">
import {h, onMounted, ref} from 'vue'
import CustomModal from "@/components/CustomModal";
import {getRequest} from "@/api";
import {BoxOpen} from "@vicons/fa";
import {NTag, NButton} from "naive-ui";


interface OSSList {
  label: string;
  value: string
  status: 0 | 1          // 0 停用  1 启用
}

const emits = defineEmits(['close'])

const showStorageConfigList = ref<boolean>(false)

const ossList = ref<OSSList[]>([])
const columns = [
  {
    title: '名称',
    key: 'label'
  }, {
    title: '状态',
    key: 'status',
    width: 100,
    render: (row: { status: number }) => {
      return h(
          NTag,
          {type: row.status ? 'primary' : 'error'},
          {default: () => (row.status ? '启用' : '停用')}
      )
    }
  }, {
    title: '操作',
    width: 60,
    render: (row: { value: string, status: number }) => {
      return h(NButton, {
        size: 'small',
        type: 'primary',
        text: true,
        onClick: () => {
          console.log("oss配置:",row.value)
        }
      }, {default: () => ('设置')})
    }
  }
]

const getOSSList = async () => {
  await getRequest("/sett/oss_list").then((res: ResponseResult) => {
    ossList.value = res.data as OSSList[];
  })
}

onMounted(() => {
  getOSSList();
  showStorageConfigList.value = true
})
</script>

<template>
  <div>
    <custom-modal v-model:show="showStorageConfigList" title="存储设置"
                  :has-action="false"
                  :widths="700" @after-leave="emits('close')">
      <template #default>
        <n-data-table :columns="columns"
                      size="small"
                      :data="ossList">
          <template #empty>
            <n-empty description="暂无相关数据">
              <template #icon>
                <n-icon size="42">
                  <BoxOpen/>
                </n-icon>
              </template>
            </n-empty>
          </template>
        </n-data-table>
        <n-p :depth="3"><span style="color: red">*</span>&nbsp;在未配置或禁用对象存储（OSS）的情况下，系统将自动切换至本地存储模式；存储设置仅支持单实例配置。
        </n-p>
      </template>
    </custom-modal>
  </div>

</template>

<style scoped lang="scss">

</style>